<template>
  <div>
    <el-dialog :title="billTitle" :visible.sync="dialogTableVisible">
      <div style="height:550px;" class="scrollbar">
        <el-scrollbar style="height:100%">
          <el-table class="text-sm" :data="tableData">
            <el-table-column type="index" label="序号" />
            <el-table-column
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.prop"
              :label="item.label"
            >
              <template slot-scope="scope">
                <template v-if="item.type === 'img'">
                  <el-image
                    v-if="
                      scope.row[item.prop].indexOf('.png') > -1 ||
                        scope.row[item.prop].indexOf('.jpg') > -1
                    "
                    style="width: 50px; height: 50px"
                    :src="fileUrl + scope.row[item.prop]"
                    :preview-src-list="[fileUrl + scope.row[item.prop]]"
                  >
                    <div slot="error" class="image-slot">
                      <i
                        class="el-icon-picture-outline"
                        :title="fileUrl + scope.row[item.prop]"
                      ></i>
                    </div>
                  </el-image>
                  <!-- <a
                      :href="fileUrl + scope.row[item.prop]"
                      class="text-blue text-hover"
                      >点击查看PDF</a
                    > -->
                  <el-button
                    v-else-if="scope.row[item.prop].indexOf('.pdf') > -1"
                    size="mini"
                    type="text"
                    @click="viewPdf(scope.row[item.prop])"
                    >点击查看PDF</el-button
                  >
                </template>
                <template v-else>
                  {{ scope.row[item.prop] }}
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-link
      type="primary"
      :underline="false"
      class="text-sm"
      @click="showDialog(data.id)"
      >查看</el-link
    >
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";

export default {
  props: ["data"],
  data() {
    return {
      fileUrl: constant.FILE_SERVER,
      billTitle: "",
      tableData: [],
      list: {},
      dialogTableVisible: false,
      // 序号	运单号	费用名称	单价	币种	数量	总额	余额	费用时间	账单类型	备注
      tableColumns: [
        { prop: "bankStatementAmount", label: "水单金额" },
        { prop: "currency", label: "水单币种" },
        { prop: "memoImgUrl", label: "图片", type: "img" }
      ]
    };
  },
  created() {},
  mounted() {
    this.billTitle = this.data.name + " 水单";
  },
  methods: {
    async showDialog(id) {
      this.dialogTableVisible = true;
      if (id !== null) {
        const data = {};
        data["id"] = id;
        let res = await ajax("findByIdWithMemos", data);
        console.log(res);
        if (res) {
          this.tableData = res;
        }
      }
    },
    viewPdf(val) {
      console.log("val: ", val);
      window.open(this.fileUrl + val);
    }
  }
};
</script>
<style scoped>
.el-scrollbar {
  display: flex;
  justify-content: space-around;
  margin-right: -15px;
}
div >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  width: 110%;
  height: 100%;
}
.text-hover a :hover {
  color: #0081ff;
}
</style>
